<template>
	<view class="sol-radio" :style="[style]" @click="$_click">
		<view class="sol-radio_dot" :style="[styleDot]"></view>
	</view>
</template>

<script>
	/**
	 * sol-radio 单项选择器组件
	 * @property {String|Number} value 默认值 - 默认空
	 * @property {String|Number} name 选中属性值 - 默认空
	 * @property {Boolean} checked 是否选中 - 默认false
	 * @property {String} color 选择颜色 - 默认#cccccc
	 * @property {String} colorChecked 选中颜色 - 默认#607d8b
	 * @property {Number} size 大小 - 默认44,单位rpx
	 * @event {Function} change 选择点击事件
	 * @example <sol-radio :checked="true" @change="fnClick"></sol-radio>
	 */
	export default {
		name: 'sol-radio',
		props: {
			// 选中属性值
			name: {
				type: [String, Number],
				default: "",
			},
			// 默认值
			value: {
				type: [String, Number],
				default: 0,
			},
			// 是否选中
			checked: {
				type: Boolean,
				default: false
			},
			// 颜色
			color: {
				type: String,
				default: "#cccccc",
			},
			// 选择颜色
			colorChecked: {
				type: String,
				default: "#607d8b",
			},
			// 大小
			size: {
				type: Number,
				default: 44
			},
		},
		data() {
			return {
				check: false
			};
		},
		watch: {
			value(now) {
				this.check = (this.name == now)
			}
		},
		computed: {
			style() {
				let style = {
					width: `${this.size}rpx`,
					height: `${this.size}rpx`,
				};
				style.backgroundColor = this.color;
				return style;
			},
			styleDot() {
				let style = {
					width: `${this.size-8}rpx`,
					height: `${this.size-8}rpx`,
				};
				if(this.check){
					style.backgroundColor = this.colorChecked;
				}
				return style;
			}
		},
		mounted() {
			// 初始是否打开
			this.check = this.checked;
			if (this.check) {
				this.$emit('input', this.name);
			}
			// 绑定值与属性相同
			if (this.value == this.name) {
				this.check = true;
			}
		},
		methods: {
			// 点击
			$_click(e) {
				this.$emit('input', this.name);
				this.$emit('change', this.name);
			}
		}
	};
</script>

<style lang="scss">
	.sol-radio {
		height: 44rpx;
		width: 44rpx;
		background-color: #cccccc;
		border: none;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;
		
		&_dot {
			background-color: transparent;
			border-radius: 50%;
			height: 36rpx;
			width: 36rpx;
			transition: all 0.3s;
		}
		
	}
</style>
